<template>
  <!-- 店铺经营游戏配置 -->
  <div class="app-container" v-loading="loading">
    <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button v-hasPermi="['searchTenantID']" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
        <el-button type="primary" icon="el-icon-document-copy" @click="openPhoneCode()">回收链接</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="addACount">新增游戏</el-button>
        <el-button  type="primary" @click="goGujia" v-hasPermi="['gujiagongshinew']">估价配置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table :data="tableData" stripe>
        <el-table-column label="游戏ID" prop="id" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="图标" prop="icon">
          <template slot-scope="scope">
            <img style="height:32px" :src="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column label="启用状态" prop="icon">
          <template slot-scope="scope">
            <el-switch @change="enableChange($event,scope.row)" v-model="scope.row.isEnableConfig" :active-value="1" :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排序" prop="sort" /> -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="edit" icon="el-icon-edit" @click="editItem(scope.row)">回收配置</el-button>
            <el-button type="add"  @click="goPifu(scope.row)" >皮肤价值</el-button>
            <!-- <el-button type="del" icon="el-icon-delete" @click="delItem(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
    <huishouConfigDialog ref="huishouConfigDialog"></huishouConfigDialog>
    <!-- 扫码上传弹窗 -->
    <el-dialog title="回收网链接" :visible.sync="qrCodeShow" width="620px" append-to-body @close="qrCodeShow=false">
          <div ref="qrcode" style="width:300px; height:300px;margin:0 auto;margin-bottom:15px"></div>
          <div style="color:#999;text-align:center">{{h5BasicUrl}}</div>
          <div class="center" style="margin-top:20px">
            <el-button size="small" type="primary" @click="copy">复制</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import gameSettingApi from "@/api/tenantApis/gameSetting";
import addDialog from "./addEditDialog.vue";
import huishouConfigDialog from "./huishouConfigDialog.vue";
import gameConfigApi from "@/api/gameConfig";
import QRCode from "qrcodejs2";
export default {
  name: "",
  components: { addDialog, huishouConfigDialog },
  data() {
    return {
      loading: false,
      config: [],
      upLoadUrl: "",
      user: {},
      queryParams: {
        tenantId: "",
      },
      tableData: [],
      h5BasicUrl:'',
      qrCodeShow:false
    };
  },
  computed: {
    allGameList() {
      return this.$store.getters.allGameList;
    },
    tenantList() {
      let arr = JSON.parse(JSON.stringify(this.$store.getters.tenantList));
      return arr;
    },
    tenantInfo() {
      return this.$store.getters.shopInfo;
    },
  },
  watch: {
    allGameList: {
      handler(newVal) {
        if (newVal && newVal.length) {
          this.getList();
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 进入皮肤价值
    goPifu(){
      this.$router.push({
        name:'AttrsList'
      })
    },
    // 进入估价配置
    goGujia(){
      this.$router.push({
        name:'Gujiagongshinew'
      })
    },
    // 新增
    addACount() {
      this.$refs.huishouConfigDialog.open("add");
    },
    // 编辑
    editItem(row) {
      // 查看详情
      this.$refs.huishouConfigDialog.open("edit", row.id);
    },
    //生成回收链接的二维码
    async openPhoneCode() {
      let str = "";
      if (this.tenantInfo.domain) {
        
        str = this.tenantInfo.domain;
        if (str.includes(",")) {
          str = str.split(",")[0];
        }
      }
      this.h5BasicUrl =
      window.location.protocol+"//" + str + "/pages/saleGameList/index?pageType=2&pageFrom=kefu";
      this.qrCodeShow = true;
      this.$nextTick(() => {
        if (this.qrcode != null) {
          this.qrcode.clear(); // 清除代码
        } else {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 300,
            height: 300,
            correctLevel: QRCode.CorrectLevel.L,
          });
          //生成二维码
          this.qrcode.makeCode(this.h5BasicUrl);
        }
      });
    },
    // 复制回收链接
    copy() {
      this.$copyText(this.h5BasicUrl).then(() => {
        this.$message.success("已复制到剪切板");
      });
    },
    //
    enableChange(e, row) {
      this.loading = true;
      gameConfigApi
        .huishouGameChangeState({
          gameId: row.id,
          isEnableConfig: e,
        })
        .then((res) => {
          this.loading = false;
          this.$message.success(res.msg);
          this.getList();
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 获取列表
    getList() {
      this.loading = true;
      gameConfigApi.getHuishouGameList().then((res) => {
        this.loading = false;
        const arr = res.data;
        if (this.allGameList && this.allGameList.length && arr && arr.length) {
          this.allGameList.forEach((game) => {
            arr.forEach((row, i2) => {
              if (row.gameId == game.id) {
                arr[i2] = { ...row, ...game };
                if(row.icon) arr[i2].icon = row.icon;
                
                arr[i2].isEnableConfig = row.isEnableConfig;
              }
            });
          });
        }
        this.tableData = arr;
      });
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          gameSettingApi.delGame(row.tenantGameInfoId).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
